<template>
    <div class="faq-container">
        <h1 class="title">常见问题解答</h1>
        <div v-for="(question, index) in faqData" :key="index" class="question-box" @click="toggleAnswer(index)">
            <div class="question-header">
                <h3>{{ question.title }}</h3>
                <span class="toggle-icon" :class="{ 'open': question.showAnswer }">▼</span>
            </div>
            <transition name="fade">
                <div v-if="question.showAnswer" class="answer">
                    <div class="divider"></div>
                    <p>{{ question.answer }}</p>
                </div>
            </transition>
        </div>
    </div>
</template>

<script>
import { ref } from 'vue';
import axios from 'axios'; // 假设你已经安装了axios

export default {
    setup() {
        const faqData = ref([]);

        // 假设这是从后端获取数据的函数
        const fetchFaqData = async () => {
            try {
                const response = await axios.get('/api/faq'); // 替换为你的后端API接口URL
                faqData.value = response.data; // 假设API返回的数据是JSON格式
            } catch (error) {
                console.error('Error fetching FAQ data:', error);
            }
        };

        // 在页面加载时调用fetchFaqData函数
        fetchFaqData();

        const toggleAnswer = (index) => {
            faqData.value[index].showAnswer = !faqData.value[index].showAnswer;
        };

        return {
            faqData,
            toggleAnswer,
        };
    },
};
</script>

<style scoped>
/* ... 你的样式代码 ... */
</style>
